<template>
	<view class="">
		<view class="container">
			<view class="list">
				<view class="item">
					<view class="t">
						选择类型
					</view>
					<view class="b1 u-flex u-col-center u-row-between">
						<view class="i" :class="{on:params.type==1}" @click="changeType(1)">
							 我要收购
						</view>
						<view class="i" :class="{on:params.type==2}" @click="changeType(2)">
							 我要出售
						</view>
					</view>
				</view>
				<view class="item">
					<view class="t">
						道具名称
					</view>
					<view class="b">
						<textarea type="text" v-model="params.name" placeholder="请输入"
							placeholder-style="color:#D1CDCD;font-size: 28rpx;"></textarea>
					</view>
				</view>
				<view class="item">
					<view class="t">
						价格<text>(MHB)</text>
					</view>
					<view class="b">
						<input type="number" v-model="params.price" placeholder="请输入" maxlength="9"
							placeholder-style="color:#D1CDCD;font-size: 28rpx;font-weight: 400;" class="nn" />
						<view class="big" v-if="getBig(params.price)">
							{{getBig(params.price)}}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="t">
						图片
					</view>
					<view class="img" v-if="params.image" @click="upload">
						<image :src="params.image" mode="aspectFill" class="i1">
						</image>
						<image @click.stop="params.image=''" src="../../static/del.png" mode="aspectFill" class="i3"
							v-if="params.image">
						</image>
					</view>
					<view class="img" v-else @click="upload">
						<image src="../../static/up2.png" mode="aspectFill" class="i2"></image>
					</view>
				</view>
				<view class="item">
					<view class="t">
						上架天数
					</view>
					<view class="b3">
						<slider :min="1" :max="30" @change="sliderChange" step="1" activeColor="#FF6F07"
							backgroundColor="#D1D1D6" block-color="#fff" block-size="10" :value="params.upday" />
						<view class="i i1">
							1
						</view>
						<view class="i i2" :style="{left:left+'%'}">
							{{params.upday}}
						</view>
						<view class="i i3">
							30
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer_btn" @click="gopage()">
			<view class="cont">
				<view class="btn">
					下一步
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				left: 3,
				params:{
					image: "",
					name: '',
					price: '',
					type: 1,
					upday: 1,
				}
			}
		},
		onLoad() {

		},
		computed: {
			getBig() {
				return (data) => {
					if (data) {
						return numberToChinese(data)
					} else {
						return ''
					}

					function numberToChinese(num) {
					    // 限制范围：0到999999999
					    if (num < 0 || num > 999999999) return '超出范围';
					    
					    // 定义中文数字和单位
					    const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
					    const units = ['', '十', '百', '千']; // 个级单位
					    const bigUnits = ['', '万', '亿']; // 大单位：个、万、亿
					    
					    // 处理0的情况
					    if (num === 0) {
					        return '零两整';
					    }
					    
					    // 转换为整数并补零到9位（亿级1位+万级4位+个级4位）
					    const str = Math.floor(num).toString().padStart(9, '0');
					    // 拆分三级：亿级(0-0)、万级(1-4)、个级(5-8)
					    const levels = [
					        str.slice(0, 1),    // 亿级
					        str.slice(1, 5),    // 万级
					        str.slice(5, 9)     // 个级
					    ];
					    
					    let result = '';
					    
					    // 处理每一级
					    levels.forEach((level, index) => {
					        if (level === '0000' && index !== 0) return; // 跳过空的万级和个级
					        
					        let levelStr = '';
					        // 处理当前级的每一位
					        for (let i = 0; i < level.length; i++) {
					            const digit = parseInt(level[i]);
					            if (digit !== 0) {
					                levelStr += digits[digit] + units[level.length - 1 - i];
					            } else {
					                // 只在非末尾且前一位不是零的情况下加零
					                if (i !== level.length - 1 && levelStr[levelStr.length - 1] !== '零') {
					                    levelStr += '零';
					                }
					            }
					        }
					        
					        // 去除当前级末尾的零
					        levelStr = levelStr.replace(/零+$/, '');
					        
					        // 如果当前级有内容，添加对应的大单位（万、亿）
					        if (levelStr) {
					            result += levelStr + bigUnits[2 - index];
					        }
					    });
					    
					    // 处理连续的零
					    result = result.replace(/零+/g, '零');
					    // 去除可能的开头或结尾零
					    result = result.replace(/^零+|零+$/g, '');
					    
					    // 添加金额单位
					    return result + '两整';
					}

				}
			}
		},
		methods: {
			upload() {
				this.$uploadone().then(res => {
					this.params.image = res
				})
			},
			gopage(url) {
				if (!this.params.name) {
					this.$modal.msg('请输入道具名称')
					return
				}
				if (!this.params.price) {
					this.$modal.msg('请输入价格')
					return
				}
				if (!this.params.upday) {
					this.$modal.msg('请选择天数')
					return
				}
				uni.setStorageSync('releaseData', this.params);
				uni.navigateTo({
					url: '/pages/user/release2'
				})
			},
			changeType(i) {
				this.params.type = i
			},
			sliderChange(e) {
				this.params.upday = e.detail.value
				this.left = this.params.upday / 30 * 100
			},
		}
	}
</script>

<style lang="scss" scoped>
	$color: #FF6F07;

	.container {
		padding:20rpx 30rpx;

		.on {
			opacity: 1;
		}

		.list {
			padding-bottom: 200rpx;

			.item {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx 30rpx;
				margin-bottom: 20rpx;
				position: relative;

				.s-list {
					position: absolute;
					left: 2rpx;
					right: 2rpx;
					top: 140rpx;
					background-color: #fff;
					border-radius: 0 0 20rpx 20rpx;
					box-shadow: 0rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.25);
					z-index: 999;
					border: 2rpx solid #f4f4f4;
					padding: 0 30rpx;

					.i {
						height: 60rpx;
						line-height: 60rpx;
						font-size: 28rpx;
						color: #979797;

					}
				}

				.b3 {
					margin-top: 20rpx;
					position: relative;
					padding-bottom: 30rpx;

					&::after {
						content: '';
						position: absolute;
						left: 50%;
						top: 8rpx;
						width: 4rpx;
						height: 20rpx;
						margin-left: -10rpx;
						background-color: $color;
					}

					.i {
						color: #11192D;
						font-size: 28rpx;
					}

					.i1 {
						position: absolute;
						left: 0;
						top: 0;

						&::after {
							content: '';
							position: absolute;
							left: 30rpx;
							top: 8rpx;
							width: 4rpx;
							height: 20rpx;
							background-color: $color;
						}


					}

					.i2 {
						position: absolute;
						// right: 0;
						top: 45rpx;
						margin-left: -20rpx;
					}

					.i3 {
						position: absolute;
						right: -10rpx;
						top: 0;

						&::after {
							content: '';
							position: absolute;
							right: 40rpx;
							top: 8rpx;
							width: 4rpx;
							height: 20rpx;
							background-color: $color;
						}
					}

				}

				.t {
					font-size: 32rpx;
					color: #11192D;
					height: 50rpx;
					line-height: 50rpx;

					text {
						font-size: 20rpx;
					}
				}

				.img {
					margin-top: 20rpx;
					width: 120rpx;
					height: 120rpx;
					border-radius: 16rpx;
					border: 2rpx solid #D1CDCD;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					position: relative;

					.i1 {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
						overflow: hidden;
					}

					.i2 {
						width: 48rpx;
						height: 48rpx
					}

					.i3 {
						position: absolute;
						top: -15rpx;
						right: -15rpx;
						width: 30rpx;
						height: 30rpx;
					}

				}

				.b1 {
					margin-top: 20rpx;

					.i {
						width: 300rpx;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						background: #F9F9F9;
						border-radius: 12rpx;
						color: #D1CDCD;
						font-size: 28rpx;
						border: 1px solid #F9F9F9;
					}

					.on {
						background: #FFF2E9;
						border: 1px solid $color;
						color: $color;
					}
				}

				.b {
					margin-top: 20rpx;

					input {
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						color: #11192D;
						font-size: 28rpx;
					}

					textarea {
						width: 100%;
						height: 80rpx;
						line-height: 40rpx;
						color: #11192D;
						font-size: 28rpx;
					}

					.nn {
						font-family: "DINB";
						font-size: 36rpx;
						font-weight: 600;
					}

					.big {
						line-height: 28rpx;
						height: 28rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #979797;
						text-align: left;

					}
				}
			}
		}
	}
</style>